import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { Checkbox } from "react-native-paper";
import { useTheme } from "@/contexts/ThemeContext";
import { router } from "expo-router";
import { ArgumentType } from "../../../../app/argument";
import styles from "./AgreementCheck.style";

interface AgreementCheckProps {
  agreed: boolean;
  setAgreed: (value: boolean) => void;
}

/**
 * 通用协议同意组件
 */
const AgreementCheck: React.FC<AgreementCheckProps> = ({
  agreed,
  setAgreed,
}) => {
  const { colors } = useTheme();

  const navigateToUserAgreement = () => {
    router.navigate({
      pathname: "/argument",
      params: { type: ArgumentType.USER },
    });
  };

  const navigateToPrivacyPolicy = () => {
    router.navigate({
      pathname: "/argument",
      params: { type: ArgumentType.PRIVACY },
    });
  };

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() => setAgreed(!agreed)}
      activeOpacity={0.7}
    >
      <Checkbox
        status={agreed ? "checked" : "unchecked"}
        onPress={() => setAgreed(!agreed)}
        color={colors.primary}
      />
      <Text style={[styles.text, { color: colors.text.secondary }]}>
        我已阅读并同意
        <Text
          style={[styles.link, { color: colors.text.link }]}
          onPress={navigateToUserAgreement}
        >
          《用户协议》
        </Text>
        和
        <Text
          style={[styles.link, { color: colors.text.link }]}
          onPress={navigateToPrivacyPolicy}
        >
          《隐私政策》
        </Text>
      </Text>
    </TouchableOpacity>
  );
};

export default AgreementCheck;
